{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "remove_cell"
    ]
   },
   "outputs": [],
   "source": [
    "import datapane as dp"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The first category of blocks are Display Blocks, which take existing Python objects (such pandas DataFrames, plots, and Markdown) and display them.  For instance, Datapane provides a `DataTable` block that takes a pandas `DataFrame`, and displays it as an interactive table in your report or app.\n",
    "\n",
    "Datapane supports the following blocks.\n",
    "\n",
    "### Tables and data\n",
    "\n",
    "These blocks present and highlight data. \n",
    "\n",
    "Take advantage of `pandas` and the `Styler` class for finer control over table presentation:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "import pandas as pd\n",
    "import numpy as np\n",
    "\n",
    "df = pd.DataFrame({\"A\": np.linspace(1, 10, 10)})\n",
    "df = pd.concat([df, pd.DataFrame(np.random.randn(10, 4), columns=list(\"BCDE\"))], axis=1)\n",
    "\n",
    "dp.Table(df.style.background_gradient(cmap=\"viridis\"))"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Share large datasets complete with interactivity that enables sorting, filtering, and advanced analysis using SQL:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "import pandas as pd\n",
    "import numpy as np\n",
    "\n",
    "df = pd.DataFrame(\n",
    "    {\n",
    "        \"A\": np.random.normal(-1, 1, 5000),\n",
    "        \"B\": np.random.normal(1, 2, 5000),\n",
    "    }\n",
    ")\n",
    "\n",
    "dp.DataTable(df)"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Or highlight key metrics with more than just plain text:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "dp.Group(\n",
    "    dp.BigNumber(\n",
    "        heading=\"Percentage points\",\n",
    "        value=\"84%\",\n",
    "        change=\"2%\",\n",
    "        is_upward_change=True,\n",
    "    ),\n",
    "    dp.BigNumber(\n",
    "        heading=\"Percentage points\",\n",
    "        value=\"84%\",\n",
    "        change=\"2%\",\n",
    "        is_upward_change=False,\n",
    "    ),\n",
    "    dp.BigNumber(\n",
    "        heading=\"Points\",\n",
    "        value=\"1234\",\n",
    "        change=\"200\",\n",
    "        is_upward_change=True,\n",
    "    ),\n",
    "    dp.BigNumber(\n",
    "        heading=\"Points\",\n",
    "        value=\"1234\",\n",
    "        change=\"200\",\n",
    "        is_upward_change=False,\n",
    "    ),\n",
    "    columns=2,\n",
    ")"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Check out [Tables and data](/reference/display-blocks/text/) in the API Reference. \n",
    "\n",
    "### Plots and visualizations\n",
    "\n",
    "Datapane supports all major Python visualization libraries, from bubble charts with Altair:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "import altair as alt\n",
    "import pandas as pd\n",
    "from vega_datasets import data as vega_data\n",
    "\n",
    "gap = pd.read_json(vega_data.gapminder.url)\n",
    "\n",
    "select_year = alt.selection_point(\n",
    "    name=\"select\",\n",
    "    fields=[\"year\"],\n",
    "    value={\"year\": 1955},\n",
    "    bind=alt.binding_range(min=1955, max=2005, step=5),\n",
    ")\n",
    "\n",
    "alt_chart = (\n",
    "    alt.Chart(gap)\n",
    "    .mark_point(filled=True)\n",
    "    .encode(\n",
    "        alt.X(\"fertility\", scale=alt.Scale(zero=False)),\n",
    "        alt.Y(\"life_expect\", scale=alt.Scale(zero=False)),\n",
    "        alt.Size(\"pop:Q\"),\n",
    "        alt.Color(\"cluster:N\"),\n",
    "        alt.Order(\"pop:Q\", sort=\"descending\"),\n",
    "    )\n",
    "    .add_params(select_year)\n",
    "    .transform_filter(select_year)\n",
    ")\n",
    "\n",
    "dp.Plot(alt_chart)"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "All the way to geographic plots with Folium:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "import folium\n",
    "\n",
    "m = folium.Map(location=[45.5236, -122.6750])\n",
    "\n",
    "dp.Plot(m)"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Check out [Plots and visualizations](/reference/display-blocks/plots/) in the API Reference. "
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Text and HTML\n",
    "\n",
    "Whether you need to embed markdown, a code block:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "code = \"\"\"\n",
    "function foo(n) {\n",
    "  return foo(n + 1)\n",
    "}\n",
    "\"\"\"\n",
    "\n",
    "dp.Code(code=code, language=\"javascript\")\n"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Present a LaTeX formula, or HTML:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "html = \"\"\"\n",
    "<html>\n",
    "    <style type='text/css'>\n",
    "        @keyframes example {\n",
    "            0%   {color: #EEE;}\n",
    "            25%  {color: #EC4899;}\n",
    "            50%  {color: #8B5CF6;}\n",
    "            100% {color: #EF4444;}\n",
    "        }\n",
    "        #container {\n",
    "            background: #1F2937;\n",
    "            padding: 10em;\n",
    "        }\n",
    "        h1 {\n",
    "            color:#eee;\n",
    "            animation-name: example;\n",
    "            animation-duration: 4s;\n",
    "            animation-iteration-count: infinite;\n",
    "        }\n",
    "    </style>\n",
    "    <div id=\"container\">\n",
    "      <h1> Welcome to my App </h1>\n",
    "    </div>\n",
    "</html>\n",
    "\"\"\"\n",
    "\n",
    "dp.HTML(html)"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Check out [Text and HTML](/reference/display-blocks/text/) in the API Reference for further details and more examples.\n",
    "\n",
    "### Media and embeds\n",
    "\n",
    "There are often cases where you need to include an external image:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "dp.Media(file=\"./image.png\", name=\"Image1\", caption=\"Datapane in action!\")"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Or attach a file that your user can download:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "data_path = \"./netflix_stock_data.csv\"\n",
    "\n",
    "dp.Attachment(file=data_path)"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Check out [Media and embeds](/reference/display-blocks/embeds/) in the API Reference. \n",
    "\n",
    "## Automatic conversion\n",
    "\n",
    "As well as explicitly specifying your block type (for instance, by using `dp.Plot`), Datapane will try and choose the best block for your object if you pass it in directly.\n",
    "\n",
    "The defaults are as follows:\n",
    "\n",
    "| Object Type           | Datapane Block |\n",
    "| --------------------- | -------------- |\n",
    "| pandas DataFrame      | `dp.Table` (up to 100 cells),<br> `dp.DataTable` (over 100 cells) |\n",
    "| string                | `dp.Text`      |\n",
    "| Altair                | `dp.Plot`      |\n",
    "| Bokeh                 | `dp.Plot`      |\n",
    "| Folium                | `dp.Plot`      |\n",
    "| Matplotlib / Seaborn  | `dp.Plot`      |\n",
    "| Plotly                | `dp.Plot`      |"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}
